<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            

         -->
        <div id="root">
            
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示

            const student = Vue.extend({
                template:`
                    <div>
                        <h2>学生名字：{{studentName}}</h2>
                        <h2>学生年龄：{{studentAge}}</h2>
                    </div>
                `,
                data() {
                    return {
                        studentName:'张三',
                        studentAge:18
                    }
                }
            })
            const school = Vue.extend({
                name:'xuexiao',
                template:`
                    <div>
                        <h2>学校名字：{{schoolName}}</h2>
                        <h2>学校地址：{{schoolAddress}}</h2>
                        <student></student>
                    </div>
                `,
                data() {
                    return {
                        schoolName:'清华',
                        schoolAddress:'北京'
                    }
                },
                components:{
                    student
                }
            })
            const hello = Vue.extend({
                template:`
                    <h2>{{nihao}}欢迎你</h2>
                `,
                data() {
                    return {
                        nihao:'hello'
                    }
                }
            })

            const app = {
                template:`
                    <div>
                        <school></school>
                        <hello></hello>
                    </div>
                `,
                components:{
                    school,
                    hello
                }
            }
            

            new Vue({
                template:`<app></app>`,
                el:'#root',
                data:{

                },
                components:{
                    app
                }
            })
        </script>
    </body>
</html>